
$(function () {
    function getCartData(cart_name = "cart") {
        // 判定localstorage 里面是否存在 cart数据， 如果存在我们就把他变成对象返回出去赋值给 cart ; 
        // 如果不存在那么我们就返回一个空对象; 
        try {
            var res = JSON.parse(localStorage.getItem(cart_name))
            // 如果不存在cart那么我们需要返回一个空对象; 
            if (res === null) return {};

            return res;

        } catch (e) {
            // console.log("error");
            return {};
        }
    }
    var cart = getCartData();

    // 进行数据的渲染 : 
    $.ajax({
        url: "../static/list.json",
        success: function (res) {
            render(res.data);
        }
    })

    // 过滤数据并渲染; 
    function render(list) {

        // 根据cart里面的id去过滤商品数据; 
        list = list.filter(item => {
            if (item.id in cart) {
                item.count = cart[item.id];
                return true;
            };
        });
        // 渲染页面; 
        $(".contents").html(
            list.map(item =>
                `<div class="goods" data-id="${item.id}">
                                          <div class="img-box">
                                                <img src="${item.img}" alt="">
                                          </div>
                                          <div class="title">${item.title}</div>
                                          <div class="xiaoji">${item.price}</div>
                                          <div class="count">
                                                <button class="add">+</button>
                                                <input type="text" value=${item.count}>
                                                <button class="reduce">-</button>
                                          </div>
                                          <div class="price">${item.price * item.count}</div>
                                          <div class="options">
                                                <a 
                                                class="remove"
                                                href="javascript:void(0)">删除</a>
                                          </div>
                                    </div>`
            ).join("")
        );


        // 增加购物车 
        $(".contents").on("click", ".add", function () {
            // 获取当前按钮对应商品的的id; 
            var id = $(this).parents(".goods").attr("data-id");
            // 1. 让input的value增加; 
            // 2. 让小计计算结果增加; 
            // 让商品数量自增; 
            cart[id]++

            $(this).siblings("input").val(cart[id]);

            // 计算小计 : 

            var price = $(this).parent().siblings(".xiaoji").html();

            $(this).parent().siblings(".price").html(cart[id] * price);

            //把更新好的数据放入到 购物车之中
            localStorage.setItem("cart", JSON.stringify(cart));
            getSum();
        })

        // 增加购物车 
        $(".contents").on("click", ".reduce", function () {
            // 获取当前按钮对应商品的的id; 
            var id = $(this).parents(".goods").attr("data-id");
            // 1. 让input的value增加; 
            // 2. 让小计计算结果增加; 
            // 让商品数量自增; 
            cart[id]--

            $(this).siblings("input").val(cart[id]);

            // 计算小计 : 

            var price = $(this).parent().siblings(".xiaoji").html();

            $(this).parent().siblings(".price").html(cart[id] * price);

            //把更新好的数据放入到 购物车之中
            localStorage.setItem("cart", JSON.stringify(cart));
            getSum();
        })
        //
        getSum();
        function getSum() {
            var money = 0;
            $(".price").each(function (i, ele) {
                money += parseFloat($(ele).text());
            });
            $(".total_price em").text(money);
        }

        $(".contents").on("click", ".remove", function () {
            var id = $(this).parents(".goods").attr("data-id")

            $(this).parents(".goods").remove();

            delete cart[id]

            localStorage.setItem("cart", JSON.stringify(cart));

        })

    }

});

